<template>
	<view class="bg-gray">
		<view class="bg-white commonbg width">
			<view class="font15 flex-row-start bold">
				<view class="line"></view>商品列表
			</view>
			<view class="iteminfo flex-row-between" v-for="(item,index) in info.dishList">
				<view class="flex-row-between leftfont">
					{{ item.dishName}}
					<view>x{{item.num}}</view>
				</view>
				<view class="color3 rightfont">¥<!-- {{item.price}} -->0</view>
			</view>
			<view class="iteminfo flex-row-between">
				<view class="flex-row-between leftfont">
					总计
				</view>
				<view class="yellow">¥<!-- {{info.total}} -->0</view>
			</view>
		</view>
		
		<view class="bg-white commonbg width">
			<view class="boxitem flex-row-between">
				<view class="flex-row-between leftfont">
					卡座/包间
				</view>
				<view class="color3 rightfont">
					<view @click="diningTypeFun(1)" 
					    :class="diningType == 1 ? 'typechoosecur' : ''"
						class="typechoose  marginrightbtn">
						包 间
					</view>
					<view @click="diningTypeFun(2)" 
						:class="diningType == 2 ? 'typechoosecur' : ''"
						class="typechoose ">
						卡 座
					</view>
				</view>
			</view>
			<view class="boxitem flex-row-between">
				<view class="flex-row-between leftfont">
					就餐人数
				</view>
				<view class="rightfont">
					<input class="uni-input" v-model='peopleNum' placeholder="请输入" />
				</view>
			</view>
			<view class="boxitem flex-row-between">
				<view class="flex-row-between leftfont">
					桌号
				</view>
				<view class="rightfont">
					<input class="uni-input" v-model='position' placeholder="请输入" />
				</view>
			</view>
			<view class="boxitem flex-row-between">
				<view class="flex-row-between leftfont">
					预约就餐时间
				</view>
				<view @click="showPicker = true">
				  {{chooseTime}}
				  <u-icon name='arrow-right'></u-icon>
				</view>
			</view>
			<view class="boxitem">
				<view class="liuyan">
					<u-input
					    type='textarea'
						placeholder="请输入口味、偏好等要求、就餐人数等"
						class="mobile"
						v-model="remark"
					/>
				</view>
			</view>
		</view>
		<view class="submitbtn flex-row-between">
			<view class="price flex-row-start">
				待支付
				<view class="yellow">¥<text class="font18"><!-- {{info.total}} -->0</text></view>
			</view>
			<view class="yudin" @click="submit">确认支付</view>
		</view>
		<u-picker
			 v-model="showPicker"
			 mode="time" 
			 :confirm-color="lightColor" 
			 :params='params'
			 @confirm="timeConfirm">
		</u-picker>
	</view>
</template>

<script>
import storage from "@/utils/storage.js"; //缓存
import { dishplaceOrder } from "@/api/food";
export default {
	data() {
		return {
			lightColor:'#499C43',
			params:{
				year: true,
				month: true,
				day: true,
				hour: true,
				minute: true,
				second: false,
				// 选择时间的时间戳
				timestamp: false,
			},
			chooseTime:'请选择',
			//时间弹窗
			showPicker:false,
			remark:null,
			position:null,
			peopleNum:null,
			info:{},
			diningType:1
		};
	},
	/**
	 * 页面加载
	 */
	onLoad(options) {
		
	},
	/**
	 * 页面显示
	 */
	onShow() {
		this.info = this.$store.state.common.chooseFood
	},
	/**
	 * 触底事件
	 */
	onReachBottom() {
		
	},
	/**
	 * 下拉刷新
	 */
	onPullDownRefresh() {
		
	},
	/**
	 * 页面滚动
	 * @param {Object} e
	 */
	onPageScroll(e) {
		
	},
	mounted() {
		
	},
	methods: {
		/**
		 * 时间选择
		 */
		timeConfirm(res){
			console.log(res)
			this.chooseTime = res.year+'-'+res.month+'-'+res.day+' '+res.hour+':'+res.minute
		},
		diningTypeFun(res){
			this.diningType = res
		},
		jump(res){
			uni.navigateTo({
				url: res
			});
		},
		submit(){
			let data = {
				//appMealTime:this.chooseTime,
				diningType:this.diningType,
				remark:this.remark,
				position:this.position,
				peopleNum:this.peopleNum,
				dishList:this.info.dishList
			}
			 dishplaceOrder(data).then(res=>{
				 uni.showToast({
				 	title: "预定成功,请在订单里查看信息！",
				 	icon: "none",
				 	duration: 1500,
				 });
				 setTimeout(function () {
					 uni.navigateTo({
					 	url:'/pages/myorder/index'
					 })
				 },2000)
			 })
		}
	}
};
</script>

<style scoped lang="scss">
	.submitbtn{
		.yellow{
			padding: 0 5px 0 10px;
		}
		width: 100%;
		position: fixed;
		bottom: 0px;
		left:0;
		background-color: #fff;
		box-shadow: 0px -2px 0px 1px #EEEEEE;
		padding: 8px 10px;
		.yudin{
			width: 124px;
			height: 40px;
			background-color: #499C43;
			text-align: center;
			line-height: 40px;
			color:#fff;
			border-radius: 40px;
			font-size: 16px;
		}
	}
	.commonbg{
		padding: 12px 20px;
		border-radius: 12px;
		margin-top: 14px;
		.line{
			width: 4px;
			height: 16px;
			background-color: #499C43;
			margin-right: 5px;
		}
		.rightfont{
			width: 50%;
			text-align: right;
		}
		.leftfont{
			width: 45%;
		}
		.iteminfo{
			margin-top: 15px;
		}
		.fontbottom{
			line-height: 24px;
			margin-top: 8px;
		}
	}
	.marginrightbtn{
		margin-right: 10px;
	}
	.uni-input{
		font-size: 14px ;
	}
	.boxitem{
		padding: 15px 0;
		border-bottom: 1px solid #F6F6F6;
		.liuyan{
			border: 1px solid #F6F6F6;
			padding: 5px 10px;
			background-color: #F4F6F8;
			border-radius: 8px;
		}
	}
	.boxitem:last-child{
		border:none;
	}
	.typechoose{
		border-color: #ececec ;
		background-color: #ddd;
		color: #333;
		display: inline-block;
		padding: 5px 10px;
		border-radius: 10px;
		font-size: 12px;
	}
	.typechoosecur{
		border-color: #499C43 ;
		background-color: #E5F6E6;
		color: #499C43;
	}
</style>